<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" style="text-align: center;">
        <el-date-picker
          size="mini"
          @change="loadGzrzList"
          v-model="timeRange"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <el-button
          style="margin-left: 10px;"
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
      <el-col :span="16" :offset="4">
        <el-timeline>
          <el-timeline-item :timestamp="rz.date" placement="top" v-for="rz in gzrzList" :key="rz.gzrzId">
            <el-card>
              <rz-detail  :gzrz="rz" @rz-updated="loadGzrzList" @rz-delete="handleDelete"/>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
    <rz-form ref="rzForm" @update="loadGzrzList"/>
  </div>
</template>

<script>
import rzDetail from "@/views/duty/gzrz/rzDetail.vue";
import {delGzrz, queryGzrz} from "@/api/duty/gzrz";
import dayjs from 'dayjs'
import rzForm from "@/views/duty/gzrz/rzForm.vue";

export default {
  name: "rzList",
  components: {rzDetail, rzForm},
  data() {
    return {
      memberId: undefined,
      timeRange: [],
      gzrzList: [],
    }
  },
  mounted() {
    this.timeRange = [dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
    this.loadGzrzList()
  },
  methods: {
    handleAdd() {
      this.$refs.rzForm.open(undefined, this.$route.query.memberId)
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const gzrzIds = row.gzrzId || this.ids;
      this.$modal.confirm('是否确认删除工作日志编号为"' + gzrzIds + '"的数据项？').then(() => {
        this.loading = true;
        return delGzrz(gzrzIds);
      }).then(() => {
        this.loading = false;
        this.$modal.msgSuccess("删除成功");
        this.loadGzrzList()
      }).catch(() => {
      }).finally(() => {
        this.loading = false;
      });
    },
    loadGzrzList() {
      const query = {memberId: this.$route.query.memberId}
      if (this.timeRange) {
        if (this.timeRange.length >= 1) {
          query.start = this.timeRange[0]
        }
        if (this.timeRange.length >= 2) {
          query.end = this.timeRange[1]
        }
      }
      this.loading = true
      this.gzrzList = []
      queryGzrz(query).then(res => {
        this.gzrzList = res.data
      }).finally(() => {
        this.loading = false
      })
    },
  }
}
</script>

<style scoped>

</style>
